<template>
  <div class="value-text">
    <div class="value-text__value">
      <div class="value-text__value__value">
        <slot name="value">{{ value }}</slot>
      </div>
      <div class="value-text__value__unit">
        <slot name="unit">{{ unit }}</slot>
      </div>
    </div>
    <div class="value-text__text">
      <slot name="text">
        <img v-if="icon" :src="icon" class="icon" />
        <span>{{ text }}</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ValueText',
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss">
.value-text {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: $value_c;

  .value-text__value {
    display: flex;
    align-items: baseline;
    height: $base * 42px;
    line-height: $base * 42px;

    .value-text__value__value {
      font-size: $base * 30px;
    }

    .value-text__value__unit {
      font-size: $base * 14px;
    }
  }

  .value-text__text {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: $base * 12px;
    margin-top: $base * 7px;
    height: $base * 15px;
    line-height: $base * 15px;
  }

  .icon {
    width: $base * 16px;
    height: $base * 15px;
    margin-right: $base * 8px;
  }
}
</style>
